@page
@model B.WMS.Web.Pages.OSSTestModel
@{
    ViewData["Title"] = "OSS上传测试";
}

<div class="container mt-4">
    <h2>阿里云OSS文件上传测试</h2>
    
    <div class="row">
        <div class="col-md-6">
            <div class="card">
                <div class="card-header">
                    <h5>单个文件上传</h5>
                </div>
                <div class="card-body">
                    <form id="uploadForm" enctype="multipart/form-data">
                        <div class="mb-3">
                            <label for="file" class="form-label">选择文件</label>
                            <input type="file" class="form-control" id="file" name="file" required>
                        </div>
                        <button type="submit" class="btn btn-primary">上传文件</button>
                    </form>
                    <div id="uploadResult" class="mt-3"></div>
                </div>
            </div>
        </div>
        
        <div class="col-md-6">
            <div class="card">
                <div class="card-header">
                    <h5>批量文件上传</h5>
                </div>
                <div class="card-body">
                    <form id="uploadMultipleForm" enctype="multipart/form-data">
                        <div class="mb-3">
                            <label for="files" class="form-label">选择多个文件</label>
                            <input type="file" class="form-control" id="files" name="files" multiple required>
                        </div>
                        <button type="submit" class="btn btn-success">批量上传</button>
                    </form>
                    <div id="uploadMultipleResult" class="mt-3"></div>
                </div>
            </div>
        </div>
    </div>
    
    <div class="row mt-4">
        <div class="col-md-12">
            <div class="card">
                <div class="card-header">
                    <h5>Bucket状态检查</h5>
                </div>
                <div class="card-body">
                    <button id="checkBucket" class="btn btn-info">检查Bucket状态</button>
                    <div id="bucketStatus" class="mt-3"></div>
                </div>
            </div>
        </div>
    </div>
</div>

@section Scripts {
    <script>
        $(document).ready(function() {
            // 单个文件上传
            $('#uploadForm').on('submit', function(e) {
                e.preventDefault();
                
                var formData = new FormData();
                var fileInput = $('#file')[0];
                formData.append('file', fileInput.files[0]);
                
                $.ajax({
                    url: '/api/oss/upload',
                    type: 'POST',
                    data: formData,
                    processData: false,
                    contentType: false,
                                         success: function(response) {
                         if (response.success) {
                             // 检查是否为图片文件
                             var isImage = /\.(jpg|jpeg|png|gif|bmp|webp|svg|ico)$/i.test(response.url);
                             var displayContent = '';
                             
                             if (isImage) {
                                 displayContent = `
                                     <div class="alert alert-success">
                                         <strong>上传成功！</strong><br>
                                         <a href="${response.url}" target="_blank">${response.url}</a><br>
                                         <img src="${response.url}" class="img-fluid mt-2" style="max-width: 300px; max-height: 200px;" alt="上传的图片">
                                     </div>
                                 `;
                             } else {
                                 displayContent = `
                                     <div class="alert alert-success">
                                         <strong>上传成功！</strong><br>
                                         <a href="${response.url}" target="_blank">${response.url}</a>
                                     </div>
                                 `;
                             }
                             $('#uploadResult').html(displayContent);
                         } else {
                            $('#uploadResult').html(`
                                <div class="alert alert-danger">
                                    <strong>上传失败！</strong><br>
                                    ${response.message}
                                </div>
                            `);
                        }
                    },
                    error: function(xhr) {
                        $('#uploadResult').html(`
                            <div class="alert alert-danger">
                                <strong>上传失败！</strong><br>
                                ${xhr.responseText}
                            </div>
                        `);
                    }
                });
            });
            
            // 批量文件上传
            $('#uploadMultipleForm').on('submit', function(e) {
                e.preventDefault();
                
                var formData = new FormData();
                var fileInput = $('#files')[0];
                for (var i = 0; i < fileInput.files.length; i++) {
                    formData.append('files', fileInput.files[i]);
                }
                
                $.ajax({
                    url: '/api/oss/upload-multiple',
                    type: 'POST',
                    data: formData,
                    processData: false,
                    contentType: false,
                    success: function(response) {
                                                 if (response.success) {
                             var resultHtml = '<div class="alert alert-success"><strong>批量上传完成！</strong><br>';
                             response.results.forEach(function(result) {
                                 if (result.success) {
                                     // 检查是否为图片文件
                                     var isImage = /\.(jpg|jpeg|png|gif|bmp|webp|svg|ico)$/i.test(result.url);
                                     if (isImage) {
                                         resultHtml += `<div class="mb-3">
                                             <div>✅ ${result.fileName}: <a href="${result.url}" target="_blank">${result.url}</a></div>
                                             <img src="${result.url}" class="img-fluid mt-1" style="max-width: 200px; max-height: 150px;" alt="${result.fileName}">
                                         </div>`;
                                     } else {
                                         resultHtml += `<div class="mb-2">✅ ${result.fileName}: <a href="${result.url}" target="_blank">${result.url}</a></div>`;
                                     }
                                 } else {
                                     resultHtml += `<div class="mb-2">❌ ${result.fileName}: ${result.message}</div>`;
                                 }
                             });
                             resultHtml += '</div>';
                             $('#uploadMultipleResult').html(resultHtml);
                         } else {
                            $('#uploadMultipleResult').html(`
                                <div class="alert alert-danger">
                                    <strong>批量上传失败！</strong><br>
                                    ${response.message}
                                </div>
                            `);
                        }
                    },
                    error: function(xhr) {
                        $('#uploadMultipleResult').html(`
                            <div class="alert alert-danger">
                                <strong>批量上传失败！</strong><br>
                                ${xhr.responseText}
                            </div>
                        `);
                    }
                });
            });
            
            // 检查Bucket状态
            $('#checkBucket').on('click', function() {
                $.ajax({
                    url: '/api/oss/bucket-status',
                    type: 'GET',
                    success: function(response) {
                        if (response.success) {
                            var statusClass = response.bucketExists ? 'alert-success' : 'alert-warning';
                            var statusText = response.bucketExists ? 'Bucket存在且可访问' : 'Bucket不存在或无法访问';
                            $('#bucketStatus').html(`
                                <div class="alert ${statusClass}">
                                    <strong>Bucket状态:</strong> ${statusText}<br>
                                    <small>${response.message}</small>
                                </div>
                            `);
                        } else {
                            $('#bucketStatus').html(`
                                <div class="alert alert-danger">
                                    <strong>检查失败！</strong><br>
                                    ${response.message}
                                </div>
                            `);
                        }
                    },
                    error: function(xhr) {
                        $('#bucketStatus').html(`
                            <div class="alert alert-danger">
                                <strong>检查失败！</strong><br>
                                ${xhr.responseText}
                            </div>
                        `);
                    }
                });
            });
        });
    </script>
} 